<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form id="form" ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="ID:" prop="customer_id" v-show="false">
                    <el-input v-model="form.customer_id" disabled />
                </el-form-item>
                <el-form-item label="任务名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入任务名称" clearable />
                </el-form-item>
                <el-form-item label="任务类型:" prop="type">
                    <el-select v-model="form.type" clearable placeholder="请选择">
                        <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱不为空:" prop="email">
                    <el-switch
                        v-model="form.email"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="手机不为空:" prop="mobile">
                    <el-switch
                        v-model="form.mobile"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="导出店铺:" prop="site_id">
                    <SelectPage v-model="shop" :url="'/admin/site/selectPage'" show_field="site_name" placeholder="请选择新店铺" query_field="site_name" :multiple="true" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">新增任务</el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {
                email: true,
                mobile: true,
                type: '导出客户',
            },
            types: [
                {
                    value: '1',
                    label: '导出客户',
                }
            ],
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
<style>
#form p {
    margin: 0;padding: 0;
}
</style>
